<template>
  <div class="custom-pagination">
    <slot v-if="$slots.left" name="left" class="left"> left</slot>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper,slot" :total="total * 1"> </el-pagination>
  </div>
</template>
<script setup name="CustomPagination">
import { ref, computed, onMounted } from 'vue'

const props = defineProps({
  total: {
    type: [String, Number],
    default: 0
  },
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  }
})
const emit = defineEmits(['update:pageSize', 'update:current-page', 'getData'])
const currentPage = computed({
  get() {
    return props.currentPage
  },
  set(val) {
    emit('update:current-page', val)
    emit('getData')
  }
})
const pageSize = computed({
  get() {
    return props.pageSize
  },
  set(val) {
    emit('update:pageSize', val)
    emit('getData')
  }
})
</script>

<style lang="scss" scoped>
::v-deep(.el-pagination) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 60px;
  padding: 0 30px;
  text-align: right;
  // background-color: #06234e;
  .el-pagination__sizes,
  .el-pagination__total,
  .el-pagination__jump {
    // color: #fff;
    font-size: 16px;
  }
  .el-select__wrapper,
  .btn-prev,
  .number,
  .btn-next,
  .more {
    // background-color: #333538;
    // color: #fff;

    .el-select__selected-item {
      // color: #fff;
      font-size: 13px;
    }
  }
  .el-select__wrapper {
    border: none;
  }
  .number {
    font-size: 16px;
  }
  li.is-active {
    color: var(--el-color-primary);
  }
  .el-input__wrapper {
    border: none;
    // background-color: #333538;
    .el-input__inner {
      // color: #fff;
      font-size: 16px;
    }
  }
  // .el-pagination__total,
  // .el-pagination__jump {
  //   color: #fff !important;
  // }
}
</style>
